<!doctype html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>领取记录</title>
	<style type="text/css">
		[v-cloak] {
			display: none;
		}

		body {
			background-color: #f8f8f8;
		}

		.mb3 {
			margin-bottom: 3px;
		}

		.f-lr-box {
			background-color: #ffffff;
			margin-bottom: 0.2rem;
			padding-left: 0.1rem;
		}

		.f-lr-box>.row {
			padding: 5px 0;
			display: flex;
		}

		.f-lr-box>.row>.lt {
			width: 0.7rem;
		}

		.f-lr-box>.row>.rt {
			flex: 1;
			position: relative;
		}

		.f-lr-box>.line-top {
			border-top: 1px dashed #eeeeee;
			padding: 5px 0;
		}

		.btn-cargo {
			position: absolute;
			right: 5px;
			top: 50%;
			margin-top: -0.12rem;
			width: 0.7rem;
			text-align: center;
			display: inline-block;
			padding: 2px 0;
			border-radius: 15px;
			border: 1px solid transparent;
			border-color: #3F8EF7;
			color: #3F8EF7;
			font-size: 0.12rem;
			background-color: #DBF1FF;
		}

		.cargo {
			user-select: auto;
			padding-right: 0.8rem;
		}

		.m-data-list {
			position: relative;
		}

		#dataBox {
			padding-bottom: 0.2rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="m-data-list">
			<ul class="f-scroll" id="dataBox" v-show="dataList.length" @scroll="pullLoad" :style="{height:boxHeight}">
				<li class="f-lr-box" v-for="todo in dataList">
					<div class="row">
						<div class="lt grey">领取时间：</div>
						<div class="rt">{{ getDateTime(todo.time)[6] }}</div>
					</div>
					<div class="row">
						<div class="lt grey">订单号码：</div>
						<div class="rt">{{ todo.orderId }}</div>
					</div>
					<div class="row">
						<div class="lt grey">支付金额：</div>
						<div class="rt">{{ numberFormat(todo.fee) }}元</div>
					</div>
					<div class="row">
						<div class="lt grey">支付方式：</div>
						<div class="rt">
							<span v-if="todo.payType == 2">微信</span>
							<span v-else-if="todo.payType == 3">支付宝</span>
							<span v-else>--</span>
						</div>
					</div>
					<div class="row">
						<div class="lt grey">订单状态：</div>
						<div class="rt">
							<span v-if="todo.orderStatus == 1" class="yellow">待支付</span>
							<span v-else-if="todo.orderStatus == 2" class="yellow">领取成功，待发货</span>
							<span v-else-if="todo.orderStatus == 3" class="red">支付失败</span>
							<span v-else-if="todo.orderStatus == 4" class="red">订单关闭</span>
							<span v-else-if="todo.orderStatus == 5" class="green">已退款</span>
							<span v-else-if="todo.orderStatus == 6" class="green">已发货</span>
							<span v-else>--</span>
						</div>
					</div>
					<div class="row line-top" v-if="todo.toAddress">
						<div class="lt grey">收货信息：</div>
						<div class="rt">
							<div class="mb3">{{ todo.toName }}，{{ todo.toPhone }}</div>
							<div class="mb3">{{ todo.toAddress }}</div>
							<div>{{ todo.toPost }}</div>
						</div>
					</div>
					<div class="row line-top" v-if="todo.cargoId" style="padding:10px 0;">
						<div class="lt grey">快递单号：</div>
						<div class="rt cargo">
							<span>{{ todo.cargoCompy }}，{{ todo.cargoId }}</span>
							<span class="btn-cargo" @click="jumpDeliveryInfo(todo.cargoCompy,todo.cargoId)">查看物流</span>
						</div>
					</div>
				</li>
			</ul>
			<div v-if="!isPullLoad" class="m-dragup-loading">
				<span class="u-icon-loading"></span>
				<span class="text">加载中···</span>
			</div>
			<div class="f-no-data" v-show="!dataList.length&&!firstLoad" :style="{height:boxHeight}">
				<img src="~@/assets/img/default_pic.png" alt="">
				<div class="blue-lt">当前暂无购买记录</div>
			</div>
			<div class="f-no-more" v-show="isHaveMore">暂无更多</div>
		</div>

	</div>
	<!-- CDN加载Vue库 -->
	<script src="https://cdn.bootcss.com/vue/2.1.5/vue.min.js" type="text/javascript"></script>
</body>

</html>